<template>
  <div class="app-main">
    <el-scrollbar :native="false" tag="section" style="height: 100%" :noresize="false">
      <transition name="fade-transform" mode="out-in">
        <el-card class="box-card" :body-style="{'flex': '1'}">
          <router-view />
        </el-card>
      </transition>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped lang="scss">
.app-main {
  height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;

  .box-card {
    margin: 5px;
    min-height: calc(100vh - 110px);
    display: flex;
  }
}

.fixed-header + .app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    height: calc(100vh - 124px);

    .box-card {
      margin: 5px;
      min-height: calc(100vh - 145px);
      display: flex;
    }
  }

  .fixed-header + .app-main {
    padding-top: 84px;
  }
}

</style>
